<script setup>
import api from '../../api/ticketZone.js';
import concertShowApi from '../../api/concert_show.js'; // 新增引入
import {ref,onMounted} from "vue";
import {ElMessageBox} from "element-plus";
import lodash from 'lodash'


//定义绑定的数据
//表格中的数据
const tableData=ref([]);

const total=ref(0);
//定义对话框的显示状态
const editWinVisible=ref(false);
//查询数据
const searchObj=ref({
  current:1,
  size:10,
  showId:'',
  zoneName:'',
  price:'',
  totalStock:'',
  availableStock:'',
  seatPrefix:'',
  lockedStock:'',
});

//要修改或者新增的数据
const obj=ref({});

const search = async ()=>{
  await loadConcertShows(); // 加载演唱会信息
  var result=await api.page(searchObj.value);
  console.log('接口返回结果：', result);

  tableData.value= result.records||[];
  total.value=result.total||0;
}
//页面加载后要挂载的数据
onMounted(async()=>{
  search();
});
//定义方法
const handleUploadSuccess = (response, file) => {
  obj.value.photo=response.data;
}

const handleSizeChange = () => {
  search();
}
const  handleCurrentChange= () => {
  search();
}

const handlerSearch = ()=> {
  searchObj.value.current=1;
  search();
}
const handlerAdd = async () => {
  obj.value = {
  };
  editWinVisible.value = true;
}


const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}
const editCommit = async () => {
  // 判断是新增还是编辑（根据是否有id判断）
  if (obj.value.id) {
    // 编辑
    await api.edit(obj.value);
  } else {
    // 新增
    await api.add(obj.value);
  }
  search(); // 刷新表格
  editWinVisible.value = false; // 关闭对话框
}

const handleEdit = (index, row) => {
  obj.value=lodash.clone(row);
  editWinVisible.value=true;
  console.log(index, row)
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定要删除该行数据吗?',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        api.del(row.id);
        //重新加载数据
        //设置页从第一页开始查询
        searchObj.value.current=1;
        search();
      })

      .catch(() => {

      })
}
// 新增演唱会列表数据
const concertShowList = ref([]);

// 获取所有演唱会信息
const loadConcertShows = async () => {
  try {
    const result = await concertShowApi.page({current: 1, size: 9999}); // 获取所有演唱会
    concertShowList.value = result.records || [];
  } catch (error) {
    console.error('获取演唱会列表失败:', error);
  }
};

// 根据ID获取演唱会名称
const getConcertShowNameById = (showId) => {
  if (!showId) return '';
  const concertShow = concertShowList.value.find(item => item.id == showId);
  return concertShow ? concertShow.concertName : showId;
};


</script>
<template>
<!--  <div style="margin-top: 110px">-->

<!--    <el-card class="form-container">-->
<!--      <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px;">-->
<!--&lt;!&ndash;        <el-form-item label="序号">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.showId" placeholder="请输入演出ID" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--        <el-form-item label="区域名称">-->
<!--          <el-input v-model="searchObj.zoneName" placeholder="请输入区域名称" clearable />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="价格">-->
<!--          <el-input v-model="searchObj.price" placeholder="请输入价格" clearable />-->
<!--        </el-form-item>-->
<!--&lt;!&ndash;        <el-form-item label="总库存">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.totalStock" placeholder="请输入总库存" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="可用库存">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.availableStock" placeholder="请输入可用库存" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="座位前缀">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.seatPrefix" placeholder="请输入座位前缀" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="锁定库存">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.lockedStock" placeholder="请输入锁定库存" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--      </el-form>-->

<!--      <el-form :inline="true" style="display: flex; justify-content: center; gap: 20px;">-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="handlerSearch">查询</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="handlerAdd">新添</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-card>-->
<!--  </div>-->

    <div style="margin-top: 110px;">
      <el-card class="form-container">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 20px;margin-left: 10px">
          <el-row :gutter="20" align="middle">
            <el-col :span="7" style="text-align: right;">
              <el-form-item label="区域名称">
                <el-input v-model="searchObj.zoneName" placeholder="请输入区域名称" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8" style="text-align: right;">
              <el-form-item>
                <el-button type="primary" @click="handlerSearch">查询</el-button>
                <el-button type="primary" @click="handlerAdd" style="margin-left: 10px;">新添</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>


  <el-card class="table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column label="演出ID" width="180">-->
<!--        <template #default="scope">-->
<!--          <div style="display: flex; align-items: center">-->
<!--            <span style="margin-left: 10px">{{ scope.row.showId }}</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="演唱会名称" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ getConcertShowNameById(scope.row.showId) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="区域名称" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.zoneName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.price }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="总库存" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.totalStock }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="可用库存" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.availableStock }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="座位前缀" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.seatPrefix }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="锁定库存" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.lockedStock }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="处理按钮">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          v-model:current-page="searchObj.current"
          v-model:page-size="searchObj.size"
          :page-sizes="[10, 20, 30, 50]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <!-- 编辑对话框 -->
  <el-dialog v-model="editWinVisible" :title="obj.id ? '编辑' : '新增'" width="500">
    <el-form :model="obj">
      <el-form-item label="演出ID" :label-width="100">
        <el-input v-model="obj.showId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="区域名称" :label-width="100">
        <el-input v-model="obj.zoneName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="价格" :label-width="100">
        <el-input v-model="obj.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="总库存" :label-width="100">
        <el-input v-model="obj.totalStock" autocomplete="off" />
      </el-form-item>
      <el-form-item label="可用库存" :label-width="100">
        <el-input v-model="obj.availableStock" autocomplete="off" />
      </el-form-item>
      <el-form-item label="座位前缀" :label-width="100">
        <el-input v-model="obj.seatPrefix" autocomplete="off" />
      </el-form-item>
      <el-form-item label="锁定库存" :label-width="100">
        <el-input v-model="obj.lockedStock" autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>/* 表单容器样式 */
.form-container {
  margin: 0 20px 20px 20px;
  border-radius: 6px;
  overflow: hidden;
}

/* 表格容器样式 */
.table-container {
  margin: 0 20px 20px 20px;
  border-radius: 6px;
  overflow: hidden;
  height: auto;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-right: 10px;
}
</style>